/**
 * @author yz
 */
ComponentsPanel = function(config){
	
	var cArray = [];
	for(c in Mashuproom.components){
		var comp = Mashuproom.components[c];
		cArray.push(new Array(comp.id,comp.name,comp.description));
	}
    var configStore = new Ext.data.SimpleStore({
        fields: ['id','name', 'description'],
        data: cArray
    });
    
    var tpl = new Ext.XTemplate(
		'<div id="ComponentsBox">', 
			'<tpl for=".">', 
			'<div class="component" qtip="{description}"><div class="icon-component">{name}</div></div>', 
			'</tpl>', 
			'<div class="x-clear"></div>',
		'</div>');
    
    var view = this.view = new Ext.DataView({
        store: configStore,
        tpl: tpl,
        overClass: 'over',
        selectedClass: 'selected',
        singleSelect: true,
        itemSelector: 'div.component'
    });
    
    view.on('render', function(){
        var d = new Ext.dd.DragZone(view.el, {
            ddGroup: 'componentGroup',
            containerScroll: true,
            getDragData: function(e){
                view.onClick(e);
                var r = view.getSelectedRecords();
                if (r.length == 0) {
                    return false;
                }
                var el = e.getTarget('.component');
                if (el) {
                    return {
                        ddel: el,
                        cdata: r[0].data
                    };
                }
            }
        });
        view.dragZone = d;
    });
    
    config.items = this.view;
    
    config.bodyStyle = "background-color:#ccddee;";
    
    ComponentsPanel.superclass.constructor.call(this, config);
    
}

Ext.extend(ComponentsPanel, Ext.Panel, {

});

Ext.reg("mashuproom.componentspanel", ComponentsPanel);
